<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>初识Vue1</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
             2.root容器里的代码依然符合HTML规范，只不过混入了一些特殊的Vue语法
             3.root容器里的代码被称为【vue模板】
             4.Vue实例和容器是一一对应的
             5.真实开发中只有一个vue实例，并且会配合组件一起使用
             6.{{xx}}中的xx要写js表达式，且xx可以自动读取到data中的所有属性
             7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新 -->
        <!-- 准备好一个容器，名字是root -->
        <div id="root">
            <h1>HELLO!{{name}},{{address}}</h1>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false  // 阻止Vue在启动时生成生产提示，不起作用，直接改了vue.js中的值
            // 创建Vue实例
            new Vue({
                el:'#root', // el用于指定当前Vue实例为哪个容器服务，就是id选择器，如果上面是class = 'root',那这里就是el:'.root'
                //el:document.getElementById('root') //和上面是一样的
                data:{  //data中用于存储数据，数据供el所指定的容器去使用
                    name:'张三',
                    address:'山东'
                }
            })
        </script>

        
    </body>
</html>